<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <title>临沂市消防监控系统</title>
    <link rel="stylesheet" href="../lib/css/bootstrop.css" />
    <link rel="stylesheet" href="../css/header.css">
    <link rel="stylesheet" href="../css/login.css">
    <link rel="stylesheet" href="../css/from.css">
    <link rel="stylesheet" href="../css/fire_three.css">
    <script src="../lib/js/uilt.config.js"></script>
    <script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.10&key=62aefed2dd623a0f5042245bf44f362f"></script>
</head>

<body>
<div class="con">
    <div class="head">
        <div class="row">
            <div class="col-md-3 text-center">
                <div class="head-time background">
                    2018年10月11号 16:23：21
                </div>
            </div>
            <div class="col-md-6 text-center">
                <div class="head-bt background">
                    消防联动预警平台
                </div>
            </div>
            <div class="col-md-3 text-right">
                <div class="head-add background text-center">消防一中队</div>
                <div class="head-btn background text-center"><a href="#">退出</a></div>
            </div>
        </div>
    </div>
    <div class="first-main">
        <div class="row">
            <div class="col-md-3">
                <div class="three-left-top background">
                    <table>
                        <tbody>
                        <tr>
                            <td>火灾编号：</td>
                            <td>LS87323</td>
                        </tr>
                        <tr>
                            <td>创建时间：</td>
                            <td>08-22 16:23</td>
                        </tr>
                        <tr>
                            <td>持续时间：</td>
                            <td>2小时</td>
                        </tr>
                        <tr>
                            <td>火灾范围：</td>
                            <td>某某某小区</td>
                        </tr>
                        <tr>
                            <td>联系电话：</td>
                            <td>18868686363</td>
                        </tr>
                        </tbody>
                    </table>
                </div>
                <div class="three-left-bottom background"></div>
            </div>
            <div class="col-md-6">
                <div class="first-main-map background">
                    <div id="container" style="width: 100%;height: 100%;border-radius: 20px;" class="containerMap"></div>
                    <div class="trap-left"></div>
                    <div class="trap-right"></div>
                </div>
                <div class="tubiao row background">
                    <div class="col-md-2"><img src="../images/home.png"></div>
                    <div class="col-md-2"><img src="../images/ico1.png"></div>
                    <div class="col-md-2"><img src="../images/user.png"></div>
                    <div class="col-md-2"><img src="../images/dingwei.png"></div>
                    <div class="col-md-2"><img src="../images/plan.png"></div>
                    <div class="col-md-2"><img src="../images/daohang.png"></div>
                </div>
                <div class="first-list background">
                    <div class="list-bt">
                        <img src="../images/main_ld.png">
                        <p>报警信息显示列表</p>
                    </div>
                    <div class="list-nr">
                        <table class="text-center">
                            <thead>
                            <tr>
                                <th>编号</th>
                                <th>类型</th>
                                <th>名称</th>
                                <th>负责人</th>
                                <th>联系电话</th>
                                <th>状态</th>
                                <th>备注</th>
                            </tr>
                            </thead>
                            <tbody>
                            <tr>
                                <td>0001</td>
                                <td>xx社区消防站</td>
                                <td>社区</td>
                                <td>王倩倩</td>
                                <td>1878909887</td>
                                <td><span>已接收</span></td>
                                <td>A社区7号楼3单元</td>
                            </tr>
                            <tr>
                                <td>0001</td>
                                <td>xx社区消防站</td>
                                <td>社区</td>
                                <td>王倩倩</td>
                                <td>1878909887</td>
                                <td><span>已接收</span></td>
                                <td>A社区7号楼3单元</td>
                            </tr>
                            <tr>
                                <td>0001</td>
                                <td>xx社区消防站</td>
                                <td>社区</td>
                                <td>王倩倩</td>
                                <td>1878909887</td>
                                <td><span>已接收</span></td>
                                <td>A社区7号楼3单元</td>
                            </tr>
                            <tr>
                                <td>0001</td>
                                <td>xx社区消防站</td>
                                <td>社区</td>
                                <td>王倩倩</td>
                                <td>1878909887</td>
                                <td><span>已接收</span></td>
                                <td>A社区7号楼3单元</td>
                            </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
            <div class="col-md-3 first-list-nr">
                <div class="three-list background">
                    <p>应急预案：</p>
                    <select>
                        <option>ds</option>
                        <option>ds</option>
                    </select>
                    <a href="#" class="background">启动</a>
                </div>
                <div class="two_list-nr background">
                    <p>实时信息</p>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="tk background" style="display: none;">
   <div class="tk-top">
       <p>火灾范围：</p>
       <select>
           <option>请选择火灾范围</option>
           <option>请选择火灾范围</option>
           <option>请选择火灾范围</option>
           <option>请选择火灾范围</option>
       </select>
       <textarea placeholder="请填写火灾范围"></textarea>
   </div>
    <div class="tk-top">
        <p>值班领导：</p>
        <select>
            <option>请选择火灾范围</option>
            <option>请选择火灾范围</option>
            <option>请选择火灾范围</option>
            <option>请选择火灾范围</option>
        </select>
        <p>通讯员：</p>
        <select>
            <option>请选择火灾范围</option>
            <option>请选择火灾范围</option>
            <option>请选择火灾范围</option>
            <option>请选择火灾范围</option>
        </select>
    </div>
    <div class="tk-bottom">
        <p>消防车：</p>
        <select class="bottom-select">
            <option>请选择火灾范围</option>
            <option>请选择火灾范围</option>
            <option>请选择火灾范围</option>
            <option>请选择火灾范围</option>
        </select>
        <input type="checkbox" class="se-btn">
        <p>驾驶员：</p>
        <select>
            <option>请选择火灾范围</option>
            <option>请选择火灾范围</option>
            <option>请选择火灾范围</option>
            <option>请选择火灾范围</option>
        </select>
    </div>
    <div class="inps">
        <div class="inps-item"><label>1号位：</label><input type="checkbox"></div>
        <div class="inps-item"><label>2号位：</label><input type="checkbox"></div>
        <div class="inps-item"><label>3号位：</label><input type="checkbox"></div>
        <div class="inps-item"><label>4号位：</label><input type="checkbox"></div>
    </div>
    <div class="tk-btn">
        <a href="#" class="background cj">创建</a>
        <a href="#" class="background gb">关闭</a>
    </div>
</div>
</body>
<script src="../lib/js/jquery-3.1.1.min.js" type="text/javascript" charset="utf-8"></script>
<script src="../lib/js/bootstrap.min.js"></script>
<script>
    $(function () {
        bind()
        // var cd =  todayTime()
        //console.log(cd)
    })
    var clickListener, map = new AMap.Map('container', {
        resizeEnable: true,
        center: [116.39, 39.9]
    });
    //bt1的click的绑定事件
    var bind = function() {
        remove(); //防止重复绑定
        clickListener = AMap.event.addListener(map, "click", function(e) {
            console.log(e.lnglat)
            new AMap.Marker({
                position: e.lnglat,
                map: map
            });
        });
    };
    //bt2的click的绑定事件
    var remove = function() {
        if (clickListener) {
            AMap.event.removeListener(clickListener);//移除事件，以绑定时返回的对象作为参数
        }
    };
</script>
</html>